<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" id="checkAll" v-model="isCheck" />
    </label>
    <span>
      已完成 <span id="allComplateTodos">{{isCheckAll}}</span> /全部
      <span id="allTodos">{{todoListLength}}</span>
    </span>
    <button id="removeAllComplate" class="btn btn-danger" @click="remove" >
      清除已完成任务
    </button>
  </div>
</template>

<script>
export default {
  name: "TodoFooter",
  props:{
    todoListLength:Number,
    isCheckAll:Number
  },
  methods:{
    remove(){
      this.$emit("removeAll")
    }
  },
  computed:{
    isCheck:{
      get(){
        return this.todoListLength === this.isCheckAll && this.todoListLength > 0
      },
      set(value){
        this.$emit("chenckedAll",value)
      }
    }
  }
};
</script>

<style>
</style>